<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>支付宝-网上支付-安全快递</title>
    <link rel="stylesheet" href="css/1reset.css">
    <link rel="stylesheet" href="css/9payment.css">
</head>
<body>
    <div class="topbar">
        <div class="topbar-warp">
            <a href="javascript:;">常见问题</a>
            <span>你好，欢迎使用支付宝付款！</span>
        </div>
    </div>
    <header>
        <div id="container">
            <div class="header-title">
                <div class="logo"></div>
                <span>我的收银台</span>
            </div>
        </div>
    </header>
    <main>
        <div id="container">
            <div class="order-area">
                <div class="order-row">
                    <div class="area-base">
                        <div class="order-extend">
                            <span class="span-left">
                                <span>正在使用即时到账交易</span>
                                <span class="blue">[?]</span>
                            </span>
                            <span class="span-right">交易将在30分钟后关闭，请及时付款！</span>
                        </div>
                        <div class="order-message">
                            <span class="long">魅族-订单号51100944321935387091OCN01</span>
                            <span class="short"> 收款方：珠海市魅族科技有限公司</span>
                        </div>
                    </div>
                    <span class="totalPrice"><strong></strong> 元</span>
                </div>
            </div>
            <div class="order-center">
                <div id="container">
                <div class="center-view">
                    <h1>扫一扫付款(元)</h1>
                    <span class="totalPrice">
                        <strong></strong>
                    </span>
                    <div class="code">
                        <img src="assets/images/order/14.png" alt="">
                        <span>首次使用请下载手机支付宝</span>
                        <div class="sweep">
                            <img src="assets/images/order/T1ASFgXdtnXXXXXXXX.jpg" alt="">
                        </div>
                    </div>
                    <div class="pay">
                        <input type="text" placeholder="请输入金额">
                        <span class="success">支付</span>
                    </div>
                </div>
                <div class="view-switch">
                    <div class="switch-tip">
                        <div class="switch-icon">
                            <img src="assets/images/order/15.png" alt="">
                            <div class="btn">
                                < 登录账户付款
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </main>
    <footer>
        <div class="copyright">
            <a href="javascript:;">
                    ICP证：沪B2-20150087
            </a>
        </div>
        <div class="partner">
            <img src="assets/images/order/13.png" alt="">
        </div>
    </footer>
    <div class="mask">
        <div class="info succ">
            <p>您已支付成功！将在<span class="time">5</span>秒后离开页面</p>
            <a href="success.html">立即跳转></a>
        </div>
        <div class="info filed">
            <p>支付失败！请重新输入！</p>
            <a href="javascript:;">确定</a>
        </div>
    </div>
</body>
<script src="assets/jquery.js"></script>
<script src="assets/jquery.cookie.js"></script>
<script>
    $(".totalPrice strong").html(($.cookie("TotalPrice")+".00"))

    $(".success").click(function(){
        $(".mask").show()
        if($(".pay input").val()+".00" ==$(".totalPrice strong").html()){
            $(".succ").show()
            var num = $(".time").html();
            var t =setInterval(function(){
                num--
                $(".time").html(num)
                if(num == 0 ){
                    window.location.href = "./success.html";
                }
            },1000);
        }else{
            $(".filed").show()
        }
    })

    $(".filed a").click(function(){
        $(".mask").hide();
        $(".filed").hide()
    })

</script>
</html>